<script setup>
import {ref} from "vue";
import {ElMessage} from "element-plus";
import {insertCourse} from "../../../../api/course/course.js";
import router from "../../../../router/index.js";


// 课程
const course=ref({
  courseName:'',
  description:'',
  startTime:'',
  endTime:''
})

// 创建课程
const handleInsertCourse=async ()=>{
  console.log(course.value)
  await insertCourse(course.value).then(()=>{
    ElMessage.success("创建课程成功");
    router.back();
  })
}

</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header style="background: #3a4357;height: 10vh">
        <div style="display: flex; align-items: center; height: 100%;">
          <!--        居中-->
          <span style="color: white;margin-left: 50%">新建课程</span>
        </div>
      </el-header>
      <el-main style="height: 90vh;margin-left: 400px">
        <el-form
            label-position="top"
            label-width="auto"
            :model="course"
            style="width: 600px"
        >
          <el-form-item label="课程名称" style="margin-top: 30px">
            <el-input placeholder="请输入课程名称" v-model="course.courseName"/>
          </el-form-item>
          <el-form-item label="课程描述" style="margin-top: 50px">
            <el-input
                v-model="course.description"
                style="width: 600px"
                autosize
                type="textarea"
                placeholder="请输入课程描述"
            />
          </el-form-item>
          <div class="demo-time-range">
            <el-form-item label="课程开始时间" style="margin-top: 50px">
              <el-date-picker
                  v-model="course.startTime"
                  style="width: 600px"
                  type="datetime"
                  placeholder="开始时间"
              />
            </el-form-item>
            <el-form-item label="课程结束时间" style="margin-top: 50px">
              <el-date-picker
                  v-model="course.endTime"
                  style="width: 600px"
                  type="datetime"
                  placeholder="结束时间"
              />
            </el-form-item>
          </div>
          <!--        靠右-->
          <div style="display: flex;justify-content: center;margin-top: 20vh">
          <el-button style="width: 100px">取消</el-button>
          <el-button type="primary" style="width: 100px" @click="handleInsertCourse">保存</el-button>
  </div>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped lang="less">

</style>